<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>自定义控件属性模板</title>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/common/bootstrap/js/jquery-1.12.4.js"></script>
</head>
<body>
<div id="">
    <ul>
        <li>名称：<input name="" style=" width: 120px;"></li>
        <li>
            <ul>
                <li><input type="checkbox" name=""/>是否必填</li>
                <li><input type="checkbox" name=""/>是否可搜索</li>
                <li><input type="checkbox" name=""/>是否隐私项</li>
            </ul>
        </li>
        <li>内容：<span style=" margin-left:10px; color: white; background-color: #FF857B;">专业术语</span></li>
        <li>
            <ul id="professional_term">
            </ul>
            <ul>
                <li>
                    <input id="btn_merger_terms" type="button" value="+ 合并术语"
                           style="background-color: green; color: white; "/>
                </li>
            </ul>
        </li>
        <li>
            来源：
            <select style=" width: 120px;">
                <option>请选择</option>
                <option>手工录入</option>
                <option>移动APP</option>
                <option>网页</option>
                <option>微信</option>
            </select>
        </li>
        <li>
            分类：
            <select style=" width: 120px;">
                <option>请选择</option>
                <option>症状</option>
                <option>分类1</option>
                <option>分类2</option>
            </select>
        </li>
        <li>
            <input type="button" value="添加至节点数"/>
        </li>
    </ul>
</div>
<style>
    ul li {
        list-style: none;
    }
</style>
<script>
    $(function () {
        /*添加专业术语的数量*/
        $("#btn_merger_terms").click(function () {
            $("#professional_term").append("<li class=\"minus_professional_term\">\n" +
                "<input class=\"btn_professional_term\" type=\"button\" value=\"-\" style=\"background-color: red; color: white;\">\n" +
                "<input type=\"text\" style=\" width: 120px;\"/>\n" +
                "</li>")
        })

        /*减去专业术语的数量*/
        $(".btn_professional_term").click(function () {
            $(".btn_professional_term").prev().remove();
        })
    })
</script>
</body>
</html>